<template>
  <div class="commentListModule">
    <better-scroll ref="bs3" @downCb="downCb" @upCb="upCb" :noMore="noMore">
      <template v-slot:content>
        <div class="commentList">
          <div class="item" v-for="(item,index) in tableData" :key="index">
            <div class="title" @click="routerPush(item.articleId, 'articleDetail')">
              <i class="cms-topic" style="font-size: 12px; margin-right: 3px; color: rgb(170, 170, 170);"></i>
              <span>{{item.articleTitle}}</span>

              <div class="statusBox" v-if="item.status =='0'">
                <span  style="color:red">已禁用</span>
              </div>
            </div>
            <div class="content"><i class="cms-comment" style="font-size: 13px; margin-right: 3px; color: rgb(170, 170, 170);"></i>
              <span v-html="item.detail"></span>
            </div>
            <div class="detailInfo">
              <div class="time">{{item.createTime}}</div>
            </div>
          </div>
        </div>
        <div v-show="tableData.length ==0" class="searchEmptyBox main">
          <div style="background: #fff; height: 1px"></div>
          <h1 class="searchInfo" v-html="resultText"></h1>
        </div>
      </template>
    </better-scroll>

  </div>
</template>

<script lang="ts">
import {
    searchComment,
    searchReply
} from 'src/plugins/http/server/article/index';
import {
    reactive, ref, onMounted, computed
} from 'vue';
import store from 'src/store';
import betterScroll from 'src/components/betterScroll/index.vue';
import { useRouter, useRoute } from 'vue-router';
import { msgFn } from 'src/utils';

export default {
    'components': {
        betterScroll
    },
    setup() {
        const resultText = ref();

        // betterScroll
        const bs3 = ref();
        const noMore = reactive({
            'status': false,
            'text': '-- 暂无更多数据 --'
        });
        const $router = useRouter();
        const $route = useRoute();

        const pager = reactive({
            'pageNo': 1,
            'pageSize': 10,
            'total': 0
        });
        const userInfo = computed(() => store.state.userInfo);

        const obj: any = computed(() => {
            let fnObj;
            if ($route.params.type === '1') {
                fnObj = {
                    'getDataFn': searchComment
                };
            } else if ($route.params.type === '2') {
                fnObj = {
                    'getDataFn': searchReply
                };
            }
            return fnObj;
        });

        const tableData = ref([]);

        const routerPush = (id: string, routerName: string) => {
            let params = {
                'name': routerName,
                'query': {
                    'self': '0'
                },
                'params': {
                    'topicId': id
                }
            };
            $router.push(params);
        };
        const getData = (cb?: () => void) => {
            let params = {
                'pageNo': pager.pageNo,
                'pageSize': pager.pageSize,
                'self': true,
                'id': userInfo.value.id
            };
            obj.value['getDataFn']({
                'data': params
            })
                .then((res: any) => {
                    if (res.data.Datas.length > 0) {
                        res.data.Datas.forEach((item: replyObj | commentObj) => {
                            item.createTime = UtilTools.formatDateTime({
                                'date': item.createTime
                            });
                        });
                        pager.total = res.data.total;
                        if (pager.pageNo === 1) {
                            tableData.value = res.data.Datas;
                        } else {
                            tableData.value = tableData.value.concat(res.data.Datas);
                        }
                    } else {
                        resultText.value = '暂无数据！';
                        tableData.value = [];
                    }
                    if (cb) {
                        cb();
                    }
                })
                .catch((e: any) => {
                    msgFn(e);
                });
        };

        onMounted(() => {
            getData();
        });
        return {
            resultText,
            pager,
            tableData,
            routerPush,
            getData,
            bs3,
            noMore,
            downCb() {
                pager.pageNo = 1;
                getData(() => {
                    noMore.status = false;
                    bs3.value.downRefresh();
                });
            },
            upCb() {
                if (!noMore.status) {
                    if (tableData.value.length >= pager.total) {
                        noMore.status = true;
                    } else {
                        pager.pageNo += 1;
                        getData(() => {
                            bs3.value.upRefresh();
                        });
                    }
                }
                bs3.value.upRefresh();
            }
        };
    }
};
</script>
<style lang='less' scoped>
@import '~@/views/my/myComment&reply/index.css';
</style>